<template>
    <div class="main-content">
        <div class="screen-frame clearfix">
            <div class="col-md-6 col-lg-5">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 col-sm-2 control-label">楼盘名称：</label>
                        <div class="col-md-8 col-sm-10">
                            <input type="text" class="form-control" placeholder="楼盘名称" v-model="params.premisesName">
                        </div>
                    </div>
                </div>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 col-sm-2 control-label">物业类型：</label>
                        <div class="col-md-8 col-sm-10">
                            <select class="form-control" v-model="params.estateType">
                                <option value="">全部</option>
                                <option v-for="(row,index) in estate_list" v-bind:value="index" :key="index">{{row}}</option>
                            </select>
                        </div>
                        <div class="col-md-2 col-sm-3">

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-5">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 col-sm-2 control-label">省份市区：</label>
                        <div class="col-md-8 col-sm-10">
                            <select class="form-control" style="width:32%;float:left" v-model="params.provinceId" id="province" v-on:change="getCity()">
                                <option value="">全部</option>
                                <option v-for="(province,index) in province_list" :value="province.id" :key="index">{{province.name}}</option>
                            </select>
                            <span style="float:left">-</span>
                            <select class="form-control" style="width:32%;float:left" v-model="params.cityId" id="city" v-on:change="getArea()">
                                <option value="">全部</option>
                                <option v-for="(city,index) in city_list" :value="city.id" :key="index">{{city.name}}</option>
                            </select>
                            <span style="float:left">-</span>
                            <select class="form-control" style="width:32%;float:left" v-model="params.areaId">
                                <option value="">全部</option>
                                <option v-for="(area,index) in area_list" :value="area.id" :key="index">{{area.name}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 col-sm-2 control-label">驻场人员：</label>
                        <div class="col-md-6 col-sm-6">
                            <input type="text" class="form-control" placeholder="请输入驻场人员姓名" v-model="params.caseMemberName">
                            <button type="submit" class="btn screen-submit" v-on:click="getList(true)">查询</button>
                        </div>
                    </div>
                </div>
            </div>
            <dvi class="col-md-2">
                <div class="form-horizontal">
                    <div class="form-group">
                        <Button type="primary" @click="showWxMsgSetDetail" v-res="{code:'menu_0009_0003_0002'}">推送节点管理</Button>
                    </div>
                </div>
                <div class="form-horizontal">
                    <div class="form-group">
                        <Button class="btn-border" @click="toReuseSms" v-res="{code:'menu_0009_0003_0003'}">复用短信设置</Button>
                    </div>
                </div>
            </dvi>
        </div>
        <div class="table-responsive">
            <div style="text-align: right;margin: 10px 0;"><Icon type="android-alert" color="#f87242" size="18" /> 驻场人员中，能够接收到微信推送消息的人为蓝色，不接受消息的人为黑色</div>
            <table class="table table-striped table-bordered min-width-790">
                <thead>
                <tr>
                    <th width="7%">序号</th>
                    <th width="20%">楼盘名称</th>
                    <th width="10%">驻场人数</th>
                    <th width="33%">驻场人员</th>
                    <th width="15%">项目经理</th>
                    <th width="5%">推送管理</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(row, index) in list" :key="index">
                    <td>{{index + 1}}</td>
                    <td>{{row.premisesName}}</td>
                    <td>{{row.caseMemberNum}}</td>
                    <td v-html="row.caseMember"></td>
                    <td>{{row.manager}}</td>
                    <td>
                        <Button type="primary" @click="openSelfUserModal(row)" v-res="{code:'menu_0009_0003_0001'}">管理</Button>
                    </td>
                </tr>
                </tbody>
            </table>
            <div v-if="(!list || list.length == 0) && params.caseMemberName" style="text-align: center;line-height: 50px;font-weight: bold;font-size: 15px;">未查找到该驻场人员</div>
        </div>
        <div id="laypage_cur_pre"></div>
        <CaseMemberWxMsgListModal v-bind:caseMemberInfo="caseMemberInfo" v-on:updateCaseMemberListener='updateCaseMember'></CaseMemberWxMsgListModal>
        <WxMsgSetDetail ref="wxMsgSet" v-on:checkWxPush="checkWxPush"></WxMsgSetDetail>
        <div class="no-wx-node" v-if="noNode">
        </div>
        <div class="no-wx-node-content" v-if="noNode">
            <div class="no-wx-node-title ">微信推送节点已全部关闭</div>
            <div class="no-wx-node-title ">请开启节点后再进行人员规则设置</div>
            <div class=""> <Button class="btn-wx-node" @click="goToSetWxPush">开启推送节点</Button></div>
        </div>
    </div>
</template>
<script>
    import CaseMemberWxMsgListModal from './CaseMemberListWxModal.vue'
    import WxMsgSetDetail from './WxMsgSetDetail.vue'
    export default{
        data(){
            return {
                params:{
                    pageNo:1,
                    pageSize:10,
                    premisesName:'',
                    provinceId:'',
                    cityId:'',
                    areaId:'',
                    estateType:'',
                    domain: window.location.href,
                    caseMemberName: ''
                },
                estate_list:[],
                province_list:[],
                city_list:[],
                area_list:[],
                list:[],
                caseMemberInfo:{},
                noNode:false
            }
        },components: {
            CaseMemberWxMsgListModal,
            WxMsgSetDetail
        },
        mounted:function(){
            //初始化加载
            this.getList();
            this.estateList();
            this.provinceList();
            // this.checkWxPush();
        },
        methods:{
            openSelfUserModal (row){
                this.caseMemberInfo = row;
                $("#CaseMemberSmsListModal").modal("show");
            },
            getList (flag){
                var _self = this;
                var body = {}
                if(flag) {
                    this.params.pageNo = 1;
                }
                body.params = _self.params;
                var url = _self.utilHelper.apiUrl+'/api/getPremisesCMSmsList';
                _self.$http.post(url, body).then((response)=>{
                    var resData = response.body.resData;
                    if(resData.result == "1"){
                        _self.list = resData.list;

                        if(_self.list != null && _self.list.length > 0) {
                            _self.list.forEach(row => {
                                row.caseMember = _self.setCaseMemberName(row.caseMember);
                            });
                        }

                        var total = resData.total;
                        var current = resData.pageNo;

                        layui.laypage.render({
                            elem: $('#laypage_cur_pre'), //容器。值支持id名、原生dom对象，jquery对象,
                            limit: _self.params.pageSize,
                            curr: current,
                            count: total,
                            theme: '#f87242;', //皮肤
                            first: '首页', //若不显示，设置false即可
                            last: '尾页', //若不显示，设置false即可
                            prev: '上一页', //若不显示，设置false即可
                            next: '下一页', //若不显示，设置false即可
                            layout: ['prev', 'page', 'next', 'skip', 'count'],

                            jump: function(obj, first) {
                                if (!first) {
                                    _self.params.pageNo = obj.curr;
                                    _self.getList(0);
                                }
                            }
                        });


                    }
                });
            },
            provinceList:function(){
                var _self = this;
                var body = {};
                body.params = {};
                var url = _self.utilHelper.apiUrl+'/api/getProvince';
                _self.$http.post(url, body).then((response)=>{
                    var resData = response.body.resData;
                    _self.province_list = resData.areaList;
                    if(_self.province_list || _self.province_list.length == 0){
                        _self.params.provinceId = '';
                    }
                });
            },
            estateList:function(){
                var _self = this;
                var body = {};
                body.params = {};
                var url = _self.utilHelper.apiUrl+'/common/getEnum/EstateTypeEnum';
                _self.$http.get(url, body).then((response)=>{
                    var body = response.body.data;
                    _self.estate_list = body;
                });
            },
            getCity:function() {
                var _self = this;
                var provinceId = $('#province').val();
                if (!provinceId) {
                    provinceId = 0;
                }
                var body = {};
                body.params = {
                    areaId: provinceId
                };
                var url = _self.utilHelper.apiUrl+'/api/getCity';
                _self.$http.post(url, body).then((response)=>{
                    var resData = response.body.resData;
                    _self.city_list = resData.areaList;
                    if(_self.city_list || _self.city_list.length == 0){
                        _self.params.cityId = '';
                    }

                });
            },
            getArea:function() {
                var _self = this;
                var cityId = $('#city').val();
                if (!cityId) {
                    cityId = 0;
                }
                var body = {};
                body.params = {
                    areaId: cityId
                };
                var url = _self.utilHelper.apiUrl+'/api/getArea.do';
                _self.$http.post(url, body).then((response)=>{
                    var resData = response.body.resData;
                    _self.area_list = resData.areaList;
                    if(_self.area_list || _self.area_list.length == 0){
                        _self.params.areaId = '';
                    }
                });
            },
            setCaseMemberName (caseMemberList) {
                let names = '';
                for(var i in caseMemberList){
                    if(caseMemberList[i].wxMsgStatus == 1){
                        if(this.params.caseMemberName && caseMemberList[i].accountName.indexOf(this.params.caseMemberName) != -1) {
                            names += '<span style="color:#3399cc;font-style:oblique;text-decoration:underline;">'+caseMemberList[i].accountName+'</span>、'
                        } else {
                            names += '<span style="color:#3399cc">'+caseMemberList[i].accountName+'</span>、'
                        }
                    }else{
                        if(this.params.caseMemberName && caseMemberList[i].accountName.indexOf(this.params.caseMemberName) != -1) {
                            names += '<span style="font-style:oblique;text-decoration:underline;">'+caseMemberList[i].accountName+'</span>、'
                        } else {
                            names += caseMemberList[i].accountName+'、';
                        }
                    }
                }
                if(names.charAt(names.length - 1) == '、'){
                    names = names.substr(0,names.length - 1);
                }
                return names;
            },
            updateCaseMember (){
                this.getList();
            },
            showWxMsgSetDetail(){
                this.$refs.wxMsgSet.initWeixinModelList();
                $("#WxMsgSetDetail").modal("show");
            },
            toReuseSms(){
                //示范一个公告层
                var _self = this;
                layer.open({
                    type: 1
                    ,title: false //不显示标题栏
                    ,closeBtn: false
                    ,area: '475px;'
                    ,shade: 0.8
                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,btn: ['确认', '取消    ']
                    ,btnAlign: 'r'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: '<div style="padding: 25px; line-height: 30px;    font-size: 26px;color: #E88037;font-weight: 700;">确认复用短信设置吗</div><div style="padding: 0 25px;line-height: 30px; font-size: 18px;" >复用短信设置是指将短信管理中已经对每个楼盘的每个驻场人员设置好的接收规则应用到微信推送管理中</div>'
                    ,yes: function(layero){
                        _self.reuseSms();
                    },btn2:function(){
                        layer.closeAll();
                    }
                });
            },
            reuseSms(){
                var _self = this;
                var url = this.utilHelper.apiUrl + "/api/reuseSmsSetting";
                var body = {};
                body.params={};
                layer.load(0, {shade: false});
                _self.$http.post(url, body).then((response) => {
                    var resData = response.body;
                    if(resData.result == 1){
                        layer.closeAll();
                       _self.getList(false);
                        layer.msg("复用成功");

                    }else{
                        layer.msg("复用短信设置失败");
                    }
                    layer.closeAll('loading');
                });
            },
            checkWxPush(){
                //检查微信推送开关
                var _self = this;
                var url = this.utilHelper.apiUrl + "/api/getWeiXinModelList";
                var body = {};
                body.params={};
                _self.$http.post(url, body).then((response) => {
                    var resData = response.body.resData;
                    if(resData.result == 1){
                       for(var i = 0;i < resData.list.length;i ++){
                           if(resData.list[i].enabled == 1){
                               return;
                           }
                       }
                        _self.noNode = true;
                    }else{
                        layer.msg("获取微信模板消息失败");
                    }
                });
            },
            goToSetWxPush(){
                this.$refs.wxMsgSet.initWeixinModelList();
                $("#WxMsgSetDetail").modal("show");
                this.noNode = false;
            }
        }
    }
</script>
<style scoped>
    .btn-border{background-color: none;color: #f87242;border: 1px solid #f87242}
    .no-wx-node{position: absolute;left: 0;top:0;width: 100%;height: 100%;text-align: center;background: #ffffff;opacity: 0.7;}
    .no-wx-node-content{position: absolute;top: 50%;text-align: center;width: 100%;}
    .no-wx-node-title{height: 50px;font-size: 24px;line-height: 20px;color:#FF5E5E; }
    .btn-wx-node{background: #FF5E5E;    background: #ff5e5e;color: #fff;height: 50px; width: 150px;font-size: 16px;}
</style>